<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>ZDH 数据新增</title>
    <meta name="keywords" content="ZDH 数据新增">
    <meta name="description" content="ZDH 数据新增">

    <link rel="shortcut icon" href="img/favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据源配置</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form id="data_sources" name="data_sources" method="post" class="form-horizontal" action="">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">数据源说明</label>
                            <div class="col-sm-10">
                                <input id="data_source_context" name="data_source_context" type="text"
                                       placeholder="数据源说明" class="form-control" aria-required="true"> </span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">数据源类型</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" data-live-search="true" name="data_source_type" id="data_source_type">
                                    <option>JDBC</option>
                                    <option>HDFS</option>
                                    <option>HBASE</option>
                                    <option>MONGODB</option>
                                    <option>ES</option>
                                    <option>HIVE</option>
                                    <option>KAFKA</option>
                                    <option>HTTP</option>
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">驱动类</label>
                            <div class="col-sm-10">
                                <input id="driver" name="driver" type="text" class="form-control"> <span
                                    class="help-block m-b-none">选择JDBC数据源时填写</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">连接串</label>
                            <div class="col-sm-10">
                                <input id="url" name="url" type="text" class="form-control"> <span
                                    class="help-block m-b-none">jdbc,hdfs连接串</span>
                                <span class="help-block m-b-none"><a id="a_params" href="javascript:void(0);"
                                                                     onclick="resovle_params()">详细参数</a></span>
                            </div>
                            <div id="data_sources_params" class="ibox-content" style="display: none;">
                                <p>数据源其他参数api</p>
                                <ul>
                                    <li>数据源说明：简要说明数据源作用，此说明最好不要重复</li>
                                    <li>数据源类型：选择数据源类型 目前支持 JDBC,HDFS,HBASE,HIVE,KAFKA</li>
                                    <li>驱动类：当数据源选择JDBC 时 配置驱动程序,clickhouse 只支持ClickHouse-Native-JDBC</li>
                                    <li>连接串：数据源选择JDBC,HDFS,HBASE,KAFKA 时填写</li>
                                    <li>   JDBC: 填写数据库连接的url</li>
                                    <li>   example:jdbc:mysql://127.0.0.1:3306/mydb?serverTimezone=GMT%2B8&useSSL=false</li>
                                    <li>   HDFS：填写hadoop 的连接url ，hdfs://ip:port, hadoop ha example: ip1:port1,ip2:port2,ip3:port3/clustername</li>
                                    <li>   HBASE：填写hbase 对应zookeeper 的连接</li>
                                    <li>   KAFKA：填写对应zookeeper 的连接</li>
                                    <li>   MONGODB:填写对应的mongo连接串mongodb://[username:password@]host1[:port1][,host2[:port2],...[,hostN[:portN]]][/[database][?options]]</li>
                                    <li>   ES: 填写 ip:port 格式</li>
                                    <li>   HTTP: 填写http://ip:port/[根路径]</li>
                                    <li>   REDIS: 填写ip:port 格式，如果是redis cluster 模式 填写其中一个ip 和port 即可</li>
                                    <li>   CASSANDRA:填写ip:port 格式，如果多个ip 则写ip1,ip2,ip3:port 格式，待优化</li>
                                    <li>   SFTP:填写ip:port 格式</li>
                                    <li>   KUDU:填写ip:port 格式，如果多个ip 则写ip1,ip2,ip3:port 格式</li>
                                    <li>   外部上传:需要在用户设置中设置sftp 登陆的用户名密码</li>
                                    <li>   FLUME:填写ip:port 格式，如果多个ip 则写ip1,ip2,ip3:port 格式</li>
                                    <li>   外部下载:需要在用户设置中设置sftp 登陆的用户名密码</li>
                                    <li>   TIDB:填写ip:port 格式，如果多个ip 则写ip1:port1,ip2:port2,ip3:port3 格式</li>

                                    <li>用户名：JDBC 数据源 用户名</li>
                                    <li>密码：JDBC数据源 密码</li>
                                </ul>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input id="username" name="username" type="text" placeholder="用户名" class="form-control"> </span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="password" name="password">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <div class="text-center">
                                <button id="save_zdh" name="save_zdh" class="btn btn-primary" οnsubmit='return false'
                                        type="button">保存
                                </button>
                                <button id="update_zdh" name="update_zdh" class="btn btn-primary" οnsubmit='return false'
                                        type="button">更新
                                </button>
                                <button id="reset" class="btn btn-white" type=reset>清空</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>

<!-- layer javascript -->
<script src="js/plugins/layer/layer.min.js"></script>

<!-- Toastr script -->
<script src="js/plugins/toastr/toastr.min.js"></script>

<!-- Bootstrap table -->
<script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script>
    $(document).ready(function () {

        $('#data_sources_params').hide();

        var url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
        var params = url.substr(1);//去掉问号
        var pa = params.split("&");
        var s = new Object();//定义一个全局变量-存储任务ID
        for (var i = 0; i < pa.length; i++) {
            s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
        }

        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green',
        });

        $.get('/data_sources_type', function(res) {
            $('#data_source_type').html("")
            for (i = 0; i < res.length; i++) {
                $('#data_source_type').append("<option value='"+res[i]+"'>"+res[i]+"</option>");
            }

            if (s.id == -1) {
                console.info("新增按钮触发")
            }else{
               //根据id 获取数据源信息
                console.info("更新按钮触发")
                $.ajax({
                    type: 'POST',
                    url: "data_sources_info",
                    dataType: 'json',
                    async: false,
                    data: 'id='+s.id,
                    //成功返回
                    success: function (data) {
                        $("#id").val(data.id)
                        $("#data_source_context").val(data.data_source_context)
                        $("#data_source_type").val(data.data_source_type)
                        $("#driver").val(data.driver)
                        $("#url").val(data.url)
                        $("#username").val(data.username)
                        $("#password").val(data.password)

                    },
                    //处理完成
                    complete: function () {
                        console.info("complete")
                    },
                    //报错
                    error: function (data) {
                        console.info("error: " + data.responseText);
                    }
                });
            }
        })

        if (s.id == -1) {
            console.info("新增按钮触发")
            $('#save_zdh').show()
            $('#update_zdh').hide()
        }else{
            console.info("更新按钮触发")
            $('#save_zdh').hide()
            $('#update_zdh').show()

        }


        $('#save_zdh').click(function () {

            if ( $('#data_source_context').val() == '') {
                layer.msg("数据源说明不能为空！");
                return ;
            }
            if ( $('#data_source_type').val() == '') {
                layer.msg("数据源类型不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#driver').val() == '') {
                layer.msg("数据源为JDBC时,驱动不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#url').val() == '') {
                layer.msg("数据源为JDBC时,连接串不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#username').val() == '') {
               // layer.msg("数据源为JDBC时,用户不能为空！");
              //  return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#password').val() == '') {
              //  layer.msg("数据源为JDBC时,密码不能为空！");
              //  return ;
            }
            $.ajax({
                type: 'POST',
                url: "add_data_sources",
                dataType: 'json',
                data: $("#data_sources").serialize(),
                //发送数据前
                beforeSend: function () {
                    // 禁用按钮防止重复提交
                    $("#save_zdh").attr({disabled: "disabled"});
                },
                //成功返回
                success: function (data) {
                    $("#save_zdh").removeAttr('disabled');
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },
                //处理完成
                complete: function () {
                    console.info("complete")
                },
                //报错
                error: function (data) {
                    console.info("error: " + data.responseText);
                }
            });


        })

        $('#update_zdh').click(function () {

            if ( $('#data_source_context').val() == '') {
                layer.msg("数据源说明不能为空！");
                return ;
            }
            if ( $('#data_source_type').val() == '') {
                layer.msg("数据源类型不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#driver').val() == '') {
                layer.msg("数据源为JDBC时,驱动不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#url').val() == '') {
                layer.msg("数据源为JDBC时,连接串不能为空！");
                return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#username').val() == '') {
               // layer.msg("数据源为JDBC时,用户不能为空！");
              //  return ;
            }
            if ($('#data_source_type').val() == 'JDBC' && $('#password').val() == '') {
               // layer.msg("数据源为JDBC时,密码不能为空！");
               // return ;
            }
            $.ajax({
                type: 'POST',
                url: "data_sources_update",
                dataType: 'json',
                data: $("#data_sources").serialize()+"&id="+s.id,
                //发送数据前
                beforeSend: function () {
                    // 禁用按钮防止重复提交
                    $("#update_zdh").attr({disabled: "disabled"});
                },
                //成功返回
                success: function (data) {
                    $("#update_zdh").removeAttr('disabled');
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                },
                //处理完成
                complete: function () {
                    console.info("complete")
                },
                //报错
                error: function (data) {
                    console.info("error: " + data.responseText);
                }
            });


        })

    });

    function resovle_params() {

        if($('#data_sources_params').attr("is_hide")=="false"){
            $('#data_sources_params').hide()
            $('#data_sources_params').attr("is_hide","true")
        }else{
            $('#data_sources_params').show()
            $('#data_sources_params').attr("is_hide","false")
        }


    }

</script>

</body>

</html>
